<template>
    <div class="cart py-container">
      <!--主内容-->
      <div class="checkout py-container  pay">
        <div class="checkout-tit">
          <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！<font color="red">（倒计时:{{totalTime}}秒）</font>订单号：{{payObj.out_trade_no}}</span>
          </h4>
          <span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥{{payObj.total_fee}}</em></span>
          <div class="clearfix"></div>
        </div>
        <div class="checkout-steps">
          <div class="fl weixin">支付宝支付</div>
          <div class="fl sao">
            <p class="red">请使用支付宝扫一扫。（测试阶段，所以要用沙箱版支付宝）</p>
            <div class="fl code">
              <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> -->
              <!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ" :size="338"/> -->
              <qriously :value="payObj.code_url" :size="338"/>

            </div>

          </div>
          <div class="clearfix"></div>
          <!-- <p><a href="pay.html" target="_blank">> 其他支付方式</a></p> -->

        </div>
      </div>
    </div>
</template>
<script>
import ordersApi from '@/api/orders'
export default {
      async asyncData({params,app,error}) {

          const token = app.$cookies.get('front_token');
          return await ordersApi.createNatvie(params.pid, token==undefined? '': token)
            .then(res => {
              return {
                payObj: res.data,
                orderNo: params.pid,
              }
            }).catch(e => {
              error(e)
              if(e.code==30002){
                //如果token过期了，直接把cookie里的值清空
                app.$cookies.remove('front_token');
              }
            })
          },
     data() {
         return {
           orderNo: '',
           payObj:{},
           timer1:'',
           timer2:'',
           totalTime:120,
           fallTime:120,//倒计时120秒（也就是2分钟没支付的话就算用户放弃支付）
         }
     },
     //每隔三秒调用一次查询订单状态的方法
     mounted() {
         this.timer2 = setInterval(() => {

           if(this.totalTime>0){
             this.totalTime--
           }else{//用户超过2分钟没支付视为放弃支付
             clearInterval( this.timer2)
             //提示
             this.$message({
               type: 'error',
               message: '2分钟内未支付，请移步到订单中心付款'
             })
             this.$router.push({path: '/ucenter/myorder'})
           }
         },1000);
         this.timer1 = setInterval(() => {

           if(this.fallTime>0){
             this.fallTime=this.fallTime-3
             this.queryOrderStatus(this.payObj.out_trade_no)
           }else{//用户超过2分钟没支付视为放弃支付
             clearInterval(this.timer1)
           }
         },3000);


     },
     methods:{
         queryOrderStatus(orderNo) {
             ordersApi.queryPayStatus(orderNo)
                .then(res => {
                      if(res.code==20000){
                        //支付成功，清除定时器
                        clearInterval(this.timer1)
                        //提示
                        this.$message({
                          type: 'success',
                          message: '支付成功!'
                        })
                        //跳转回到课程详情页面
                        this.$router.push({path: '/course/' + this.payObj.course_id})

                      }

                })
         }
     },
     destroyed() {

       //离开页面的时候清除定时器
       clearInterval(this.timer1)
       clearInterval(this.timer2)

     }
}
</script>
